<template>
  <div>
    <h1>Home</h1>
    <!-- 路由跳转的第一种写法，字符串写法 -->
    <!-- <router-link to="/home/music">音乐</router-link>
    <router-link to="/home/news">新闻</router-link> -->
    <!-- to的对象写法，通过path设置路由地址 -->
    <!-- <router-link :to="{
        path:'/home/music'
    }">音乐</router-link>
    <router-link :to="{
     path: '/home/news'
      }">新闻</router-link> -->
      <!-- to的对象写法，通过name属性设置路由地址 -->
      <router-link :to="{
        name:'music',
      //配置params参数在to的配置项中，如果to中书写了params则不能使用path，只能写name
        params:{
          id:'1',
          //可选参数要么不写要么写undefined，不能写空串
          time:undefined
        }
      }">华语音乐</router-link>
      <router-link :to="{
        name:'music',
      //配置params参数在to的配置项中，如果to中书写了params则不能使用path，只能写name
        params:{
          id:'2',
          //可选参数要么不写要么写undefined，不能写空串
          time:undefined
        }
      }">粤语音乐</router-link>
      <router-link :to="{
        name:'music',
      //配置params参数在to的配置项中，如果to中书写了params则不能使用path，只能写name
        params:{
          id:'3',
          //可选参数要么不写要么写undefined，不能写空串
          time:undefined
        }
      }">英语音乐</router-link>
       <router-link :to="{
        name:'news'
      }">新闻</router-link>
    <router-link to="/home/games?tit=qq飞车&version=2018">游戏1</router-link>
    <router-link :to="{
      name:'games',
      query:{
        tit:'暴力摩托',
        version:'2001'
      }

    }">游戏2</router-link>


    <router-view></router-view>
  </div> 
</template>

<script>
export default {
    name:"Home",
    mounted(){
      console.log('mouted')
    },
    beforeDestroy(){
      console.log('beforeDestroy')
    }
}
</script>

<style>

</style>